<template>
  <view class="page">
    <uni-nav-bar
      title="我的优惠券"
      left-icon="left"
      statusBar
      backgroundColor="#fff"
      :border="false"
      color="#333"
      @clickLeft="$tools.back"
    />
    <nav-tab
      :items="tabList"
      v-model="currentTab"
      @change="handleTabChange"
      :customStyle="{ position: 'fixed', top: '44px' }"
    />
    <scroll-view
      :style="{ height: scrollHeight + 'px' }"
      scroll-y
    >
      <view class="scroll-content">
        <!-- 广告轮播 -->
        <uni-swiper-dot
          :info="adList"
          :current="currentAdIndex"
          field="adTitle"
          mode="default"
        >
          <swiper
            class="ad-swiper"
            autoplay
            :interval="3000"
          >
            <swiper-item
              v-for="(item, index) in adList"
              :key="index"
              class="ad-swiper-item"
            >
              <image
                :src="item.adImg"
                class="ad-swiper-item-img"
              />
            </swiper-item>
          </swiper>
        </uni-swiper-dot>

        <view class="coupons">
          <view
            class="coupon"
            :class="{ shadow: currentTab > 0 }"
            v-for="(item, index) in coupons"
            :key="index"
          >
            <view class="coupon-content">
              <view
                class="coupon-expired-tag"
                v-if="currentTab == 2"
              >
                已过期
              </view>
              <view class="coupon-title">
                <view class="coupon-title-name">{{ item.couponName }}</view>
                <view
                  class="coupon-tag"
                  :style="{
                    backgroundColor: currentTab == 0 ? '#ff9f00' : '#999'
                  }"
                  v-if="item.couponTag"
                >
                  {{ item.couponTag }}
                </view>
              </view>
              <view class="coupon-info">
                <view class="coupon-info-left">
                  <view class="coupon-info-cell">
                    <view class="coupon-info-label">发券时间：</view>
                    <view class="coupon-info-value">
                      {{ item.createdTime }}
                    </view>
                  </view>
                  <view class="coupon-info-cell">
                    <view class="coupon-info-label">券有效期：</view>
                    <view class="coupon-info-value">
                      {{ item.endTime }}
                    </view>
                  </view>
                  <view class="coupon-info-cell">
                    <view class="coupon-info-label">使用渠道：</view>
                    <view class="coupon-info-value">
                      {{ item.channelType }}
                    </view>
                  </view>
                  <view class="coupon-info-cell">
                    <view class="coupon-info-label">使用场景：</view>
                    <view class="coupon-info-value">
                      {{ item.orderType }}
                    </view>
                  </view>
                </view>
                <view class="coupon-info-right">
                  <view
                    class="coupon-info-price"
                    :class="{ active: item.status === 1 }"
                  >
                    <view v-if="item.couponType === '1'">¥</view>
                    <view class="coupon-info-price-value">
                      {{ getCouponValueText(item) }}
                    </view>
                    <view v-if="item.couponType === '3'">折</view>
                  </view>
                  <view class="coupon-info-desc">
                    {{ item.amountDesc }}
                  </view>
                </view>
              </view>
            </view>
            <view class="coupon-footer">
              <view class="d-flex-row-y-center">
                <view
                  class="mr-sm"
                  @tap="goToCouponRule(item)"
                >
                  使用规则
                </view>
                <uni-icons
                  type="right"
                  size="14"
                  color="#777777"
                  @tap="goToCouponRule(item)"
                />
              </view>
              <view
                class="footer-btn"
                v-if="item.status === 1"
              >
                立即使用
              </view>
            </view>
            <image
              v-if="currentTab === 1"
              class="coupon-used"
              src="/pages/marketing/static/coupons/used.png"
            />
            <view
              class="coupon-new-tag"
              v-if="item.status === 1"
            >
              新获得
            </view>
          </view>
        </view>

        <view
          class="empty"
          v-if="coupons.length === 0"
        >
          <image
            src="/pages/marketing/static/coupons/no_coupon.png"
            class="empty-img"
          />
          <text>暂无优惠券~</text>
        </view>
      </view>
    </scroll-view>
    <view class="footer">
      <view class="footer-item"> 券包购买记录 </view>
      <view class="footer-item"> 批量赠送 </view>
      <view class="footer-item"> 赠送记录 </view>
    </view>
  </view>
</template>
<script>
import { mapState, mapActions } from "vuex"
export default {
  name: "coupons",
  data() {
    return {
      currentTab: 0,
      tabList: ["未使用", "已使用", "已过期", "已失效"],
      scrollHeight: 0,
      currentAdIndex: 0,
      adList: [
        {
          adImg: "/pages/marketing/static/coupons/ad_1.png",
          adTitle: "雪王币兑券宣传"
        },
        {
          adImg: "/pages/marketing/static/coupons/ad_2.png",
          adTitle: "京东校园"
        }
      ]
    }
  },
  onLoad() {
    this.scrollHeight =
      uni.getSystemInfoSync().windowHeight -
      uni.getSystemInfoSync().statusBarHeight -
      44 -
      uni.upx2px(172)
    this.getCoupons()
  },
  computed: {
    ...mapState("coupon", ["coupons"]),
    getCouponValueText() {
      return coupon => {
        if (coupon.couponType === "1") {
          return parseFloat(coupon.priceOriginal)
        }
        if (coupon.couponType === "3") {
          return parseFloat(coupon.couponDiscount / 10)
        }
      }
    }
  },
  methods: {
    ...mapActions("coupon", ["getCouponsAction"]),
    handleTabChange() {
      this.getCoupons()
    },
    getCoupons() {
      this.getCouponsAction(this.currentTab + 1)
    },
    goToCouponRule(item) {
      uni.navigateTo({
        url: `/pages/marketing/coupon-rule/coupon-rule?couponId=${item.couponId}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  background-color: #f5f5f5;
}
.scroll-content {
  padding: $uni-spacing-row-xl;
  display: flex;
  flex-direction: column;
  gap: $uni-spacing-row-xl;
}

.ad-swiper {
  width: 100%;
  height: 177rpx;
  &-item {
    width: 100%;
    height: 100%;
    &-img {
      width: 100%;
      height: 100%;
      border-radius: $uni-border-radius-xl;
    }
  }
}

.coupons {
  display: flex;
  flex-direction: column;
  gap: $uni-spacing-row-xl;
}

.coupon {
  background-color: #fff;
  border-radius: $uni-border-radius-xl;
  display: flex;
  flex-direction: column;
  position: relative;

  &.shadow {
    opacity: 0.6;
  }

  &-content {
    display: flex;
    flex-direction: column;
    padding: $uni-spacing-row-xl;
    border-bottom: 1px dashed $uni-border-color;
  }

  &-title {
    display: flex;
    align-items: center;
    font-size: $uni-font-size-lg;
    color: $uni-text-color;
    margin-bottom: $uni-spacing-row-base;
    font-weight: 500;
    &-name {
      max-width: 340rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  &-tag {
    background-color: #ff9f00;
    color: #fff;
    padding: $uni-spacing-row-sm;
    border-radius: $uni-border-radius-base;
    font-size: $uni-font-size-xs;
    margin-left: $uni-spacing-row-sm;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-expired-tag {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #999;
    color: #fff;
    padding: $uni-spacing-row-sm;
    border-radius: $uni-border-radius-sm $uni-border-radius-xl 0
      $uni-border-radius-sm;
    font-size: $uni-font-size-sm;
  }

  &-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: $uni-spacing-row-sm;
      color: $uni-text-color-secondary;
      font-size: $uni-font-size-sm;
    }
    &-cell {
      display: flex;
      align-items: center;
    }
    &-right {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      font-size: $uni-font-size-sm;
    }

    &-price {
      display: flex;
      align-items: center;
      justify-content: center;
      color: $uni-text-color;
      font-size: $uni-font-size-sm;
      margin-bottom: $uni-spacing-row-lg;
      gap: $uni-spacing-row-sm;

      &.active {
        color: $uni-color-primary;
      }

      &-value {
        font-size: 48rpx;
      }
    }

    &-desc {
      color: $uni-text-color-secondary;
      font-size: $uni-font-size-xs;
    }
  }

  &-footer {
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: $uni-spacing-row-xl;
    font-size: $uni-font-size-sm;
    color: $uni-text-color-secondary;
  }

  &-used {
    width: 100rpx;
    height: 100rpx;
    position: absolute;
    right: 160rpx;
    bottom: 40rpx;
    z-index: 2;
  }

  &-new-tag {
    position: absolute;
    right: 0;
    top: 0;
    padding: $uni-spacing-row-sm;
    border-radius: 0 $uni-border-radius-xl 0 $uni-border-radius-xl;
    font-size: $uni-font-size-sm;
    color: $uni-color-primary;
    background-color: #fff8f8;
  }

  &::before,
  &::after {
    content: " ";
    background-color: #f5f5f5;
    position: absolute;
    width: 20rpx;
    height: 20rpx;
    border-radius: 100%;
    bottom: 80rpx;
    z-index: 2;
  }

  &::before {
    left: -10rpx;
  }

  &::after {
    right: -10rpx;
  }
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: $uni-spacing-row-lg;
  padding: $uni-spacing-row-xxl 0;
  &-img {
    width: 500rpx;
    height: 500rpx;
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  height: 100rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  &-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $uni-font-size-base;
    color: $uni-text-color;
  }

  &-btn {
    width: 128rpx;
    height: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $uni-font-size-sm;
    color: #fff;
    background-color: $uni-color-primary;
    border-radius: $uni-border-radius-lg;
  }
}
</style>
